<template>
  <div class="weather">
    <div id="weather-v2-plugin-standard"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      window.WIDGET = {
        CONFIG: {
          "layout": 1,
          "width": "330",
          "height": "180",
          "background": 5,
          "dataColor": "2BC7F6",
          "borderRadius": 5,
          "key": "l9M3HYnskT"
        }
      }
      //引入天气插件
      const s = document.createElement("script")
      s.type = "text/javascript"
      s.src = "https://apip.weatherdt.com/standard/static/js/weather-standard-common.js?v=2.0"
      document.body.appendChild(s)
    }
  }
</script>

<style lang="less" scoped>
  .weather {
    height: 100%;
  }

  /deep/ .wv-v-h-row {
    height: 100% !important;
  }

  /deep/ #weather-v2-plugin-standard {
    height: 100% !important;
  }

  /deep/ .wv-v-h-col-left,
  /deep/ .wv-v-h-col-right {
    height: 70%;
  }

  /deep/ .wv-v-h-location {
    height: 15%;

    .wv-lt-row {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
</style>
